<template>
  <div>
    <HandNav />
    <Nav />
    <div class="gongsi">
      <div class="active">我的预定</div>
      <div @click="cehuazhuce">策划师管理</div>
      <div @click="gongsiziliao">公司资料</div>
    </div>
    <div class="yudinginput" style="width:80%;margin:auto;">
      时间：
      <div class="inpyuding">
        <input type="text" v-model="formw.timer" />
      </div>
      <span>--</span>
      <div class="inpyuding">
        <input type="text" v-model="formw.times" />
      </div>
      <div class="inpyuding">
        <select v-model="formw.option">
          <option value="all">全部订单</option>
          <option value="dzc">待主持</option>
          <option value="yzc">以主持</option>
          <option value="ysc">已删除</option>
        </select>
      </div>
      <div class="inpyuding">
        <select v-model="formw.mincheng">
          <option value="all">策划师姓名</option>
          <option value="dzc">全部</option>
          <option value="yzc">小美</option>
          <option value="ysc">丽丽</option>
          <option value="ysc">丹丹</option>
        </select>
      </div>
      <div class="inpyuding">
        <input type="text" v-model="formw.text" />
      </div>
    </div>
    <div class="input_btn">
      <el-button type="primary">筛选</el-button>
    </div>
    <div style="width:80%;margin:auto;">
      <div>
        <p>
          当前共查询到
          <span>xx</span>条订单,总订单额度
          <span>xxx</span> 元
          <span>导出订单列表</span>
        </p>
      </div>
      <!-- //表格 -->
      <el-table :data="tableData" style="width: 100%" border class="tables">
        <el-table-column prop="times" label="典礼时间"></el-table-column>
        <el-table-column prop="zhuchiren" label="主持人"></el-table-column>
        <el-table-column prop="jiudian" label="酒店地址"></el-table-column>
        <el-table-column prop="xiatimes" label="下单时间"></el-table-column>
        <el-table-column prop="jine" label="金额"></el-table-column>
        <el-table-column prop="xiadanren" label="下单人"></el-table-column>
        <el-table-column prop="dingdan" label="订单状态"></el-table-column>
        <el-table-column prop="beizhu" label="备注"></el-table-column>
        <el-table-column prop="caozuo" label="操作"></el-table-column>
      </el-table>
      <!-- 分页 -->
      <Fenye />
    </div>
    <div>
      <!-- //注册策划师的弹框 -->
      <el-dialog
        title="策划师管理"
        :visible.sync="dialogVisibleCehua"
        width="50%"
        :before-close="handleClose"
        append-to-body
      >
        <div style=" overflow: hidden;">
          <el-button style="float:right;" type="primary" @click="clickZhuCe">确 定</el-button>
        </div>
        <!-- 表格 -->

        <el-table :data="tableDatacehua" style="width: 100%" border>
          <el-table-column prop="bianhao" label="编号" width="180"></el-table-column>
          <el-table-column prop="usernames" label="策划师姓名" width="180"></el-table-column>
          <el-table-column prop="textname" label="登录账号" width="180"></el-table-column>
          <el-table-column prop="xiadan" label="下单量" width="180"></el-table-column>
          <el-table-column label="操作" width="180">
            <el-button>编辑</el-button>
          </el-table-column>
        </el-table>
      </el-dialog>

      <!-- 二级弹框 -->
      <el-dialog
        title="添加账号"
        :visible.sync="dialogVisibleQueRen"
        width="30%"
        :before-close="handleClose"
        append-to-body
      >
        <el-form ref="form" :model="formCeHua" label-width="80px">
          <el-form-item label="策划师昵称">
            <el-input v-model="formCeHua.username"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="formCeHua.phone"></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="formCeHua.email"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="formCeHua.password"></el-input>
          </el-form-item>
        </el-form>

        <el-button @click="dialogVisibleQueRen = false">取 消</el-button>
        <el-button type="primary" @click="formZhuCe">确 定</el-button>
      </el-dialog>
    </div>
    <!-- 公司资料的弹框 -->
    <div>
      <el-dialog
        title="公司资料"
        :visible.sync="dialogVisibleZiLiao"
        width="30%"
        :before-close="handleClose"
      >
        <el-form ref="form" :model="formZiLiao" label-width="80px">
          <el-form-item label="公司名称">
            <p>北京xxx婚礼策划</p>
          </el-form-item>
          <el-form-item label="姓名">
            <p>张三</p>
          </el-form-item>
          <el-form-item label="手机号">
             <el-input v-model="formZiLiao.phone" placeholder="1381381438"></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
             <el-input v-model="formZiLiao.email" placeholder="574656806@qq.com"></el-input>
          </el-form-item>
          <el-form-item label="密码">
             <el-input v-model="formZiLiao.password" ></el-input>
             <p>不可修改密码</p>
          </el-form-item>
          <el-form-item label="确认密码">
             <el-input v-model="formZiLiao.passwordQ" ></el-input>
          </el-form-item>
        </el-form>

        <el-button type="primary" @click="dialogVisibleZiLiao = false">确 定</el-button>
      </el-dialog>
    </div>
    <Foot />
  </div>
</template>

<script>
import HandNav from "../../../componnet/qiantai/HeadNav";
import Nav from "../../../componnet/qiantai/Nav";
import Foot from "../../../componnet/qiantai/Foot";
import Fenye from "../fenyezujian";
import api from "../../../api";
export default {
  name: "Dynamgongsi",
  data() {
    return {
      dialogVisibleCehua: false,
      dialogVisibleQueRen: false,
      dialogVisibleZiLiao: false,
      formCeHua: {},
      // 公司资料的form
      formZiLiao: {},
      formw: {
        timer: "2018-10-1",
        times: "2018-12-1"
      },
      tableDatacehua: [
        {
          bianhao: "1",
          usernames: "小美",
          textname: "11362253242",
          xiadan: 10
        }
      ],
      tableData: [
        {
          times: "2019-25-12",
          zhuchiren: "小美",
          jiudian: "香格里拉",
          xiatimes: "2018年6月1日13:36",
          jine: "2000",
          xiadanren: "小美",
          dingdan: "待主持",
          beizhu: "需要两次彩排",
          caozuo: "评价或投诉"
        }
      ]
    };
  },
  mounted() {},
  methods: {
    // 策划师管理按钮
    cehuazhuce() {
      this.dialogVisibleCehua = true;
    },
    // 公司资料按钮
    gongsiziliao() {
      this.dialogVisibleZiLiao = true;
    },
    // 打开注册策划师的二级弹框
    clickZhuCe() {
      this.dialogVisibleQueRen = true;
    },
    // 确认添加策划师
    formZhuCe() {
      api
        .getCeHuaShi({
          username: this.formCeHua.username,
          password: this.formCeHua.password,
          email: this.formCeHua.email,
          phone: this.formCeHua.phone
        })
        .then(res => {
          this.dialogVisibleQueRen = false;
          this.dialogVisibleCehua = false;
          this.$message({
            type: "success",
            message: "注册成功"
          });
        });
    },
    handleClose() {
      this.dialogVisibleCehua = false;
      this.dialogVisibleZiLiao = false;
      this.dialogVisibleQueRen = false;
    }
  },

  components: {
    HandNav,
    Foot,
    Nav,
    Fenye
  }
};
</script>

<style lang="less" scoped>
.gongsi {
  width: 80%;
  margin: auto;
  display: flex;
  div {
    width: 15%;
    height: 50px;
    border: solid 1px #000000;
    background-color: #cccccc;
    font-size: 16px;
    text-align: center;
    line-height: 50px;
    margin-top: 20px;
    margin-bottom: 20px;
    color: #000;
    cursor: pointer;
  }
  .active {
    background-color: #fff;
  }
}
.yudinginput {
  display: flex;
  color: #000;
  font-size: 16px;
  .inpyuding {
    border: solid 1px #000;
    margin: 0 5px;
    padding-left: 10px;
    padding-top: 3px;
    input {
      outline: none;
      border: 0;
    }
    select {
      width: 110px;
      border: solid 0px #000;
      outline: none;
    }
  }
}
.input_btn {
  margin-left: 60px;
  position: relative;
  top: -30px;
  left: 65%;
}
.tables {
  margin-bottom: 200px;
}
</style>